<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/css/login.css">
</head>
<body>
<div id="wrapper" class="login-page">
    <div id="login_form" class="form">
        <form class="register-form" method="post" enctype="multipart/form-data" name="upload_form">
            <input type="text" placeholder="姓名" id="r_username"/>
            <input type="text" placeholder="学号" id="r_id"/>
            <input type="text" placeholder="身份证号" id="r_pid"/>
            <label>身份证正面</label>
            <input id="pid_img" type="file" accept="image/jpeg" style="width: 250px"/>
            <div>
                <!--<img src="/images/yzm.jpeg" onclick="getCode()" style="float:left; height: 46px">-->
                <!--<input type="text" id="r_code" placeholder="验证码" style="float:left;width: 210px"/>-->
                 <img id="ryzm_img" src="/api/yzm" onclick="getCode_r()" style="float:left; height: 46px">
                <input type="text" id="r_code" placeholder="验证码" style="float:left;width: 210px"/>
            </div>
            <button id="create">创建账户</button>
            <p class="message">已经注册完毕? <a href="#">立刻登录</a></p>
        </form>

        <form class="login-form">
            <h2>欢迎登录</h2>
            <input type="text" placeholder="用户名" value="" id="l_username"/>
            <input type="password" placeholder="密码" id="l_password"/>
            <div>
                <img id="yzm_img" src="/api/yzm" onclick="getCode()" style="float:left; height: 46px">
                <input type="text" id="l_code" placeholder="验证码" style="float:left;width: 210px"/>
            </div>
            <div>
                <input type="radio" name="l_user_cate" value="0" style="width: 30px;" checked="">学生
                <input type="radio" name="l_user_cate" value="1" style="width: 30px;">教师
                <input type="radio" name="l_user_cate" value="2" style="width: 30px;">管理员
            </div>
            <button id="login">登　录</button>
            <p class="message">还未注册? <a href="#">立刻注册信息</a></p>

        </form>
    </div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var layer = layui.layer;
    $("#pid_img").change(function () {
        var file = $("#pid_img").get(0).files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function () {
            $("#pid_img").attr("_src", reader.result.split(",")[1]);
        }
    });


    function check_login() {
        var name = $("#l_username").val();
        var pass = $("#l_password").val();
        var yzm = $("#l_code").val();
        var cate = $("input[name='l_user_cate']:checked").val();
        $.post("/login", {
                username: name,
                password: pass,
                user_cate: cate,
                yzm: yzm
            },
            function (data) {
                if (data.status == 1) {
                    layui.use("layer", function () {
                        layer.msg("登录成功!", {time: 500}, function () {
                            $(location).attr('href', '/');
                        })
                    })
                } else {

                    $("#l_password").val("");
                    $("#yzm").val("");
                    $("#l_password").focus();
                    getCode();
                    $("#login_form").removeClass('shake_effect');
                    setTimeout(function () {
                        $("#login_form").addClass('shake_effect')
                    }, 1);
                    layui.use("layer", function () {
                        layer.msg(data.msg, {time: 1000})
                    })
                }
            }
        )
    }

    function check_register() {
        var name = $("#r_username").val();
        var s_id = $("#r_id").val();
        var s_pid = $("#r_pid").val();
        var yzm = $("#r_code").val();
        var face_data = $("#pid_img").attr("_src");

        $.ajax({
            type: "PUT",
            url: "/login",
            data: {
                username: name,
                s_id: s_id,
                s_pid: s_pid,
                yzm: yzm,
                pid_img: face_data,
            },
            success: function (data) {
                if (data.status == 1) {
                    layui.use("layer", function () {
                        layer.msg("注册成功!即将跳转至登录页!", {time: 600}, function () {
                            $(location).attr('href', '/login');
                        })
                    })

                } else {
                    $("#r_code").val("");
                    $("#r_code").focus();
                    getCode_r();
                    $("#login_form").removeClass('shake_effect');
                    setTimeout(function () {
                        $("#login_form").addClass('shake_effect')
                    }, 1);
                    layui.use("layer", function () {
                        layer.msg(data.msg, {time: 1000})
                    })
                }
            }
        })

    }


    $(function () {
        $("#create").click(function () {
            check_register();
            return false;
        })
        $("#login").click(function () {
            check_login();
            return false;
        })
        $('.message a').click(function () {
            $('form').animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 'slow');
        });
    })

    //获取验证码
    function getCode() {
        $("#yzm_img").attr("src", "/api/yzm?" + new Date().getTime())
    }
    function getCode_r() {
        $("#ryzm_img").attr("src", "/api/yzm?" + new Date().getTime())
    }

</script>
</body>
</html>